* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	background: url(../img/bg4.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	z-index: 1;
}

.index_containt {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

#data_input {
	width: 50px;
	height: 120px;
	position: fixed;
	left: 0px;
	top: 40%;
}

#enteringData {
	width: 50px;
	height: 59px;
	border: none;
	color: white;
	font-size: 10px;
	background-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 2px 5px rgba(20, 20, 20, 0.8);
	display: flex;
	align-items: center;
	top: 100px;
	backdrop-filter: blur(10px);
	transition-duration: 0.1s;
}

#downTemplate {
	width: 50px;
	height: 59px;
	border: none;
	color: white;
	margin-top: 4px;
	font-size: 10px;
	background-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 2px 5px rgba(20, 20, 20, 0.8);
	display: flex;
	align-items: center;
	top: 100px;
	backdrop-filter: blur(10px);
	transition-duration: 0.5s;
}

#data_input:active {
	background-color: gray;
}

#downTemplate:active {
	background-color: gray;
}

#enteringData:hover {
	font-weight: bold;
	transform: scale(1.1);
}

#downTemplate:hover {
	font-weight: bold;
	transform: scale(1.1);
}

#show_info {
	position: relative;
	left: 50%;
	width: 800px;
	height: 400px;
	left: 32%;
	top: 35%;
	background-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 2px 15px rgba(20, 20, 20, 0.8);
	border-radius: 10px;
	top: 100px;
	backdrop-filter: blur(10px);
}

#excel-file {
	width: 50px;
	color: red;
}

#student_name {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 45%;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	font-size: 40px;
}
#btn_container{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 45%;
}
#student_name_value{
	color: aliceblue;
}
#student_number{
	display: flex;
	align-items: center;
	padding-left: 15px;
	width: 100%;
	height: 10%;
	color: aliceblue;;
}
#start,#end{
	width: 150px;
	height: 50px;
	background-color: #56D789;
	border: none;
	margin-right: 10px;
	color: aliceblue;
	transition-duration: 0.3s;
}
#start:hover{
	transform: scale(1.1);
	font-weight: bold;
}
#end:hover{
	transform: scale(1.1);
	font-weight: bold;
}
#start:active{
	transform: scale(1.1);
	background-color: #368254;
}
#end:active{
	transform: scale(1.1);
	background-color: #368254;
}


